<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="用户详情信息"
        top="2.5vh"
        width="98%"
    >
        <div class="edit_page_div">
            <div class="content_div_title">账号信息</div>
            <div title="同工信息" >
                <div class="employee_detail">
                    <div class="employee_detail_image" title="变更人员图片" @click="showUpload=true">
                        <img :src="user.imageUrl">
                    </div>
                    <div class="employee_detail_content">
                        <div class="employee_detail_person"> {{ user.nickName }} </div>
                        <div class="employee_detail_person"> {{ user.accountNumber }} </div>
                        <div class="employee_detail_person"> {{ user.roleNames }} </div>
                    </div>
                </div>
            </div>
            <div title="人员详情信息" :style="{height: height}">
                <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="人员信息" name="person">
                        person
                    </el-tab-pane>
                    <el-tab-pane label="职业信息" name="career">
                        career
                    </el-tab-pane>
                    <el-tab-pane label="合同信息" name="contract">
                        contract
                    </el-tab-pane>
                    <el-tab-pane label="银行信息" name="bank">
                        bank
                    </el-tab-pane>
                    <el-tab-pane label="证件信息" name="document">
                        document
                    </el-tab-pane>
                    <el-tab-pane label="教育经历" name="study">
                        study
                    </el-tab-pane>
                    <el-tab-pane label="工作经历" name="work">
                        work
                    </el-tab-pane>
                    <el-tab-pane label="家庭信息" name="family">
                        family
                    </el-tab-pane>
                    <el-tab-pane label="奖励信息" name="reward">
                        reward
                    </el-tab-pane>
                    <el-tab-pane label="惩戒信息" name="punish">
                        punish
                    </el-tab-pane>
                    <el-tab-pane label="变动信息" name="changes">
                        changes
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <upload-file :visible.sync="showUpload" :limit="1" suffixes=".jpg,.png,.gif,.ico" @change="updateImage"></upload-file>
    </el-dialog>
</template>

<script>
import SelectOption from "@/components/select/selectOption.vue";
import UploadFile from "@/components/upload/uploadFile.vue";

export default {
    name: "employeeDetail",
    components: {UploadFile, SelectOption},
    props: {
        visible: Boolean,
        id: String,
    },
    data() {
        return {
            height: '500px',
            heightList1: '400px',
            loading: false,
            showEdit: false,
            showUpload: false,

            user: {
                tenantName: '',
                userType: '',
                accountNumber: '',
                nickName: '',
                imageUrl: '',
                roleNames: '',
            },

            activeName: 'person'
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.height = (document.body.offsetHeight - 308) + "px";
                if (this.id) {
                    this.getUserData();
                }
            }
        }
    },
    methods: {
        getUserData() {
            this.loading = true;
            this.$axios.get("/CHILD_SYSTEM/systemUser/getOneEntity/" + this.id).then(res => {
                res.data.imageUrl = this.$store.state.fileURL + res.data.imageUrl;
                this.user = res.data;
            }).finally(() => {
                this.loading = false;
            })
        },
        updateImage(fileList) {
            this.loading = true;
            if (fileList.length < 1) {
                this.$message.error("请选择要上传的图片信息！");
            }
            this.$axios.post("/CHILD_SYSTEM/systemUser/updateImage", {
                id: this.id,
                imageUrl: fileList[0].filePath,
            }).then(res => {
                let userData = this.$root.getStorage("userData");
                userData.imageUrl = fileList[0].filePath;
                this.$root.setStorage("userData", userData);
                this.user.imageUrl = this.$store.state.fileURL + fileList[0].filePath;
            }).finally(() => {
                this.loading = false;
            })
        },
        handleClick(tab, event) {
            if (tab.label == "家庭信息") {
            } else if (tab.label == "工作经历") {
            } else if (tab.label == "学习经历") {
            }
        },
        resetForm() {
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        }
    }
}
</script>

<style lang="scss">
.employee_detail {
    width: auto;
    float: left;
    margin-left: 100px;
    padding: 10px;

    .employee_detail_image {
        float: left;
        margin-left: 20px;

        img{
            height: 60px;
            margin: 10px;
        }
    }

    .employee_detail_content {
        float: left;

        .employee_detail_person {
            float: left;
            width: auto;
            font-size: 50px;
            height: 60px;
            line-height: 60px;
            margin: 10px;
        }
    }

    .edit_button{
        line-height: 60px;
        margin: 10px;
    }

}

.person_image {
    position: absolute;
    top: 40px;
    left: 1300px;

    img{
        height: 200px;
        margin: 10px;
    }
}
</style>